<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="resources/templates/mainTemplate.xhtml">

    <ui:param name="pagetitle" value="CHUMS - Reports"/>

    <ui:define name="centerContent" class="turquaz">   

        <p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();"/>  

        <p:dialog appendToBody="true" resizable="false" modal="true" widgetVar="statusDialog" header="Loading"   
                  draggable="false" closable="false">  
            <p:graphicImage value="resources/images/ajax-loader.gif" />
        </p:dialog> 


        <p:fieldset legend="Reports" >  
            <center>

                <h:panelGrid id="reportResultForm" columns="1" cellpadding="10"> 
                    <h:form rendered="#{reportBean.reportRendered}"  prependId="false" >

                        <p:panel style="margin-left: 10px;width: 550px;" 
                                 collapsed="false" 
                                 toggleable="true" 
                                 toggleSpeed="300" 
                                 id="likeReportsID" 
                                 rendered="#{reportBean.reportID eq 0}"
                                 header="Likes">  

                            <p:pieChart id="likeReportModelID" 
                                        value="#{reportBean.likeReportModel}" 
                                        legendPosition="e"  
                                        fill="true"
                                        showDataLabels="true"
                                        style="width:500px;height:400px;font-size: 18px;" />  

                        </p:panel> 

                        <p:panel style="margin-left: 10px;width: 550px;" 
                                 collapsed="false" 
                                 toggleable="true" 
                                 toggleSpeed="300" 
                                 id="commentReportsID" 
                                 rendered="#{reportBean.reportID eq 1}"
                                 header="Comments">  

                            <p:pieChart id="commentReportModelID" 
                                        value="#{reportBean.commentReportModel}" 
                                        legendPosition="e"  
                                        fill="true"
                                        showDataLabels="true"
                                        style="width:500px;height:400px;font-size: 18px;" />  

                        </p:panel>

                        <p:panel style="margin-left: 10px;width: 550px;" 
                                 collapsed="false" 
                                 toggleable="true" 
                                 toggleSpeed="300" 
                                 id="courseReportsID" 
                                 rendered="#{reportBean.reportID eq 2}"
                                 header="Courses">  

                            <p:pieChart id="courseReportModelID" 
                                        value="#{reportBean.courseReportModel}" 
                                        legendPosition="e"  
                                        fill="true"
                                        showDataLabels="true"
                                        style="width:500px;height:400px;font-size: 18px;" />  

                        </p:panel>

                        <p:panel style="margin-left: 10px;width: 550px;" 
                                 collapsed="false" 
                                 toggleable="true" 
                                 toggleSpeed="300" 
                                 id="videoReportsID" 
                                 rendered="#{reportBean.reportID eq 3}"
                                 header="Watched Videos">  

                            <p:pieChart id="videoReportModelID" 
                                        value="#{reportBean.videoReportModel}" 
                                        legendPosition="e"  
                                        fill="true"
                                        showDataLabels="true"
                                        style="width:500px;height:400px;font-size: 18px;" />  

                        </p:panel>

                    </h:form> 
                </h:panelGrid>  

            </center>
        </p:fieldset>



    </ui:define>

    <ui:define name="leftContent" class="turquaz">

        <ui:include src="reportsLeftPanel.xhtml" />

    </ui:define> 



</ui:composition>

